<template>
  <section>
    <div
      v-if="custormItemData.params"
      class="custorm--modelbox"
    >
      <el-dialog
        custom-class="wlm-form-dialog"
        @close="closeDialog"
        :visible.sync="dialogVisible"
        width="680px"
        :append-to-body="true"
      >
        <div class="wlm-dialog-fixheader">
            <span class="wlm-dialog-inlenr">弹窗广告设置</span>
        </div>
        <div class="ivu-modal-body otheradvert-show">
          <div class="advertisement-modal flex-row flex-justify-b">
            <div
              class="general-modal-left"
              style="padding: 85px 35px; position: relative; background: rgba(0, 0, 0, 0.7);"
            ><img
                :src="getPath(custormItemData.params.thumb.file_path)"
                class=" advertisement-show-thumb"
              >
              <svg-icon
                v-if="custormItemData.params.close == 1"
                icon-class="close-icon"
                :class="'pos-'+custormItemData.params.position"
              />
            </div>
            <div class="general-modal-right wlm-dialog-main">
              <el-scrollbar>
                <otheradvert-edit
                  :custormItemData="custormItemData"
                  :custormEditEvt="custormEditEvt"
                ></otheradvert-edit>
              </el-scrollbar>
            </div>
          </div>
        </div>
        <el-footer class="footer flex-row flex-align-c flex-justify-e">
          <div class="flex-row flex-align-c flex-justify-b footer-button">
            <el-button
              style="margin-left: 10px;"
              size="small"
              @click="saveForm"
              type="primary"
            >确认</el-button>
            <el-button
              size="small"
              plain
              @click="toggle"
            >取消</el-button>
          </div>
        </el-footer>
      </el-dialog>
    </div>
  </section>
</template>

<script>
import otheradvertEdit from '@/components/CustormStyle/otheradvert_edit'
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  props: {
    custormItemData: Object,
    custormEditEvt: Function
  },
  components: {
    otheradvertEdit
  },
  computed: {
    getPath() {
      return function(path) {
        return (path.includes('https://') || path.includes('http://')) ? `${path}` : require(`@/assets/custorm_style/${path}`)
      }
    },
    isLottery() {
      const { params: { type }} = this.custormItemData
      return type === '3'
    },
    $hasTime() {
      const { data, params: { type, pattern }} = this.custormItemData
      if (Array.isArray(data) && data.length > 0) {
        const [{ sale_type }] = data
        return `${type}` === '2' && `${pattern}` === '2' && typeof sale_type === 'number' && sale_type === 0
      }
    },
    $isSave() {
      const { params: { overtime }} = this.custormItemData
      const msg = { pass: true, error: '' }
      if (overtime === '') {
        msg.pass = false
        msg.error = '请填写倒计时结束时间'
      } else {
        if (overtime <= new Date().getTime()) {
          msg.pass = false
          msg.error = '倒计时结束时间不可小于当前时间'
        }
      }
      return msg
    }
  },
  mounted() { },
  methods: {
    closeDialog() {
      if (this.$hasTime && !this.$isSave.pass) {
        this.dialogVisible = true
        this.$message.error(this.$isSave.error)
      }
    },
    toggle() {
      this.dialogVisible = !this.dialogVisible
      if (!this.dialogVisible) {
        this.closeDialog()
      }
    },
    saveForm() {
      if (this.$hasTime) {
        const { pass, error } = this.$isSave
        if (pass) {
          this.toggle()
        } else {
          this.$message.error(error)
        }
      } else {
        this.toggle()
      }
    },
    uploadFileCallBack(files) {
      const { key, displayData } = files
      if (!Array.isArray(this.custormItemData['data'])) {
        this.$set(this.custormItemData, 'data', [])
      }
      if (key === 'ChooseGoods') {
        const [{ image: [{ file_path }], goods_name, sale_type, goods_id, sku: [{ goods_price = 0, line_price = 0, stock_num = 0 }] }] = displayData
        // console.log(sale_type, '$hasTime=>ChooseGoods')
        this.$set(this.custormItemData, 'data', [{ file_path, goods_id, goods_price, sale_type, line_price, stock_num, goods_name }])
        // console.log(this.custormItemData, '$hasTime=>ChooseGoods')
      } else if (key === 'ChooseLink') {

        if (this.isLottery) {
          const [{ luck_count, luck_state, luck_title, luck_id, luck_price, luck_begin_time, luck_like, luck_tag, luck_begin_number, luck_mode, imagem,period_id}] = displayData
           console.log(period_id)
          this.$set(this.custormItemData, 'data', [{ luck_count, luck_state, luck_title, luck_id, luck_price, luck_begin_time, luck_like, luck_tag, luck_begin_number, luck_mode, imagem,period_id }])
        } else {
          const { currentRow: [file_path], displayData: [custorm] } = files
          if (file_path) {
            this.custormItemData.params.link = file_path
          } else {
            if (custorm) {
              this.custormItemData.params.link = custorm
            } else {
              this.$message.error('请选择链接~!')
            }
          }
        }
      } else {
        const { displayData: [file_path] } = files
        if (file_path) {
          this.custormItemData.params.thumb = file_path
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ivu-modal-body.otheradvert-show {
  padding: 16px 20px;
  font-size: 12px;
  line-height: 1.5;
  color: #666;
  max-height: 500px;
  min-height: 108px;
  overflow-y: auto;
  max-height: 620px;
  overflow: auto;

  * {
    text-decoration: none;
    list-style: none;
  }

  *,
  :after,
  :before {
    box-sizing: border-box;
  }

  .clearfix:after {
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    content: "";
    clear: both;
  }

  .ivu-modal-wrap * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .advertisement-modal .general-modal-left {
    width: 222px;
    height: 378px;
    border-radius: 4px;
    background: #eee;
    float: left;
  }

  .advertisement-modal .general-modal-right {
    float: left;
    margin-left: 40px;
    width:350px;
    padding: 0;
  }

  .advertisement-modal .general-modal-left img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }

  .advertisement-modal .general-modal-left span {
    position: absolute;
    right: 35px;
    top: 85px;
    color: #fff;
    width: 66px;
    height: 66px;
    line-height: 58px;
    text-align: center;
    font-size: 20px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    padding-left: 12px;
    background: #000;
    border-radius: 0 8px 0 66px;
  }
  .advertisement-modal .general-modal-left svg {
    position: absolute;
    width: 18px;
    height: 18px;
  }
  .advertisement-modal .general-modal-left .pos-1 {
    top: 54px;
    right: 18px;
  }
  .advertisement-modal .general-modal-left .pos-2 {
    left: 50%;
    bottom: 56px;
    margin-left: -9px;
  }

  .ivu-form-item {
    margin-bottom: 20px;
    vertical-align: top;
    zoom: 1;
  }

  .ivu-form-item:after,
  .ivu-form-item:before {
    content: "";
    display: table;
  }

  .ivu-form-item:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }

  .ivu-form .ivu-form-item-label {
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 12px;
    color: #666;
    line-height: 1;
    padding: 10px 20px 10px 0;
    box-sizing: border-box;
  }

  .ivu-form-item-content {
    position: relative;
    line-height: 32px;
    font-size: 12px;
  }

  .ivu-switch {
    display: inline-block;
    width: 40px;
    height: 20px;
    line-height: 20px;
    border-radius: 20px;
    vertical-align: middle;
    border: 1px solid #ccc;
    background-color: #ccc;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }

  .uploadSource {
    line-height: 80px;
  }

  .uploadSource {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    border: 1px dashed #ededed;
    text-align: center;
    color: #dad9d9;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float: left;
    position: relative;
  }

  .uploadSource.solid {
    border: 1px solid #ededed;
  }

  .uploadSource .delete {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
  }

  .uploadSource .img {
    width: 100%;
    height: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .uploadSource .change {
    display: none;
    height: 20px;
    line-height: 20px;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .advertisement-modal .general-modal-right .readonly-div {
    position: relative;
  }

  .ivu-input-icon {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    text-align: center;
    color: #999;
    position: absolute;
    right: 0;
    z-index: 3;
  }

  .ivu-input-hide-icon .ivu-input-icon,
  .ivu-input-icon-clear,
  .ivu-input-icon-validate {
    display: none;
  }

  .advertisement-modal .general-modal-right .readonly-div .readonly input {
    background: #e8effc;
    border: 0;
    cursor: pointer;
    height: 32px;
    line-height: 1.5;
    padding: 4px 12px;
    padding-left: 18px;
    font-size: 12px;
  }

  .advertisement-modal .general-modal-right .readonly-div .readonly-icon {
    color: #a7a8aa;
    position: absolute;
    top: 3px;
    left: 80px;
  }

  .ivu-radio-group {
    font-size: 12px;
    vertical-align: middle;
  }

  .ivu-radio-wrapper {
    font-size: 12px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    margin-right: 20px;
    cursor: pointer;
  }

  .ivu-radio {
    display: inline-block;
    margin-right: 8px;
    white-space: nowrap;
    position: relative;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
  }

  .ivu-radio-inner {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: relative;
    top: 0;
    left: 0;
    background-color: #fff;
    border: 1px solid #dddee1;
    border-radius: 50%;
  }

  .ivu-radio-input {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
  }

  span.ivu-radio + * {
    margin-left: 2px;
    margin-right: 2px;
  }

  .el-radio__label {
    font-size: 12px;
  }
}
</style>
